<html>    
    <head>        
        <style>             
        body{               
            padding: 0px;    
            margin: 0px;                
            border-width: 0px;            
            }            
        div{                
            padding: 0px;                
            margin: 0px;                
            border-width: 0px;            
        }        
        </style>    
    </head>    
    <body>        
        <script src="../../../src_JS/src/SVG_kit.js"></script>        
        <script src="../../../src_JS/src/misc.js"></script>        
        <script src="../../../src_JS/src/Floating.js"></script>        
        <script src="../../../src_JS/src/Plot.js"></script>        
        <script>            
            function set_descr(wrapper, color, descr_txt){                
                wrapper.innerHTML = "";                
                let descr = document.createElement("font");                
                descr.style.color = color;                
                descr.innerHTML = descr_txt;                
                wrapper.appendChild(descr);            
            }            
            function get_legend(plot_data){                
                let H = (plot_data.length+1) * 50;                
                let leg = document.createElement("div");                
                leg.style.height = H + "px";                
                function get_pan(){                    
                    let temp = document.createElement("div"); temp.style.height = "50px"; temp.style.width = "100%";                    
                    leg.appendChild(temp);                    
                    temp.style.display = "flex";                    
                    return temp;                
                }                
                for(let d= 0;d<plot_data.length;d++){                    
                    let pan = get_pan();                    
                    let icon_cnv = new SVG_canvas([0,0,50,50]);                    
                    icon_cnv.attach(pan);                    
                    let icon_line = new SVG_path("M 0 25 L 25 12 L 37 37 L 50 25", icon_cnv);                    
                    icon_line.set_stroke( plot_data[d].color, "10%");                    
                    let pan_txt = document.createElement("font"); pan_txt.style.color = "yellow"; pan_txt.style.marginLeft ="10px";                    
                    pan.appendChild(pan_txt);                    
                    pan_txt.innerHTML = plot_data[d].label;                
                }                
                let pan = get_pan();                
                set_descr(pan,  "yellow", "press to change");                
                pan.style.backgroundColor = "#34005c";                
                opacity_mouseover(pan);                
                return leg;            
            }                    
            function get_speed_up(data){                
                let serial_mean = data.serial[0];                
                for(let k=1; k<data.serial.length; k++) serial_mean += data.serial[k];                
                serial_mean = serial_mean / (1.0 * data.serial.length);                
                let speed_up_data=[];                 
                for(let k=0; k<data.parall.length; k++){                    
                    let new_val = {label:data.parall[k].label, color:data.parall[k].color, values:[]};                    
                    for(let t = 0; t<data.parall[k].values.length; t++){                        
                        let vals = [];                        
                        for(let tt=0; tt<data.parall[k].values[t].length; tt++) vals.push( serial_mean / ( data.Threads[t] * data.parall[k].values[t][tt]) );                        
                        new_val.values.push(vals);                    
                    }                    
                    speed_up_data.push(new_val);                
                }                
                return speed_up_data;            
            }        
        </script>        
        <script>
let time_data =
{"serial":[0.101223,0.109158,0.090339,0.105942,0.076049],"Threads":[2,3,4],"parall":[{"label":"Query_thread_pool","values":[[0.331240,0.286023,0.261998,0.255192,0.246484],[0.291990,0.286476,0.289572,0.285811,0.284032],[0.301453,0.304308,0.301541,0.300431,0.298438]],"color":"red"},{"label":"Shared_tree","values":[[0.066989,0.065230,0.059997,0.066532,0.067239],[0.067846,0.068051,0.070018,0.069594,0.068791],[0.069924,0.068074,0.069082,0.069567,0.069825]],"color":"green"},{"label":"Copied_trees","values":[[0.041880,0.042643,0.041535,0.041404,0.040776],[0.031457,0.030470,0.030344,0.034317,0.034811],[0.027796,0.025866,0.025056,0.025430,0.025334]],"color":"blue"},{"label":"Multi_agents","values":[[0.043896,0.047335,0.044622,0.042058,0.047348],[0.047312,0.047764,0.051307,0.042772,0.042988],[0.046100,0.045430,0.044965,0.041966,0.042399]],"color":"brown"}]};
            let speed_up = get_speed_up(time_data);            
            let plot_time = new Plot(time_data.parall, time_data.Threads, 0.05);            
            document.body.removeChild(plot_time.get_main_div());            
            let plot_speed_up = new Plot(speed_up, time_data.Threads, 0.05);            
            let legend = get_legend(time_data.parall);            
            let Flt = new Floating_div(300, (time_data.parall.length+2) * 50, 50, "#34005c", "black" );            
            Flt.get_body().appendChild(legend);            
            Flt.detach();            
            let show_float = true;            
            function init_corner(plot){                
                let corner =  plot.get_corner();                
                opacity_mouseover(corner);                
                let set_icon = SVG_image.get_div_image("../../../src_JS/image/set.svg");                
                corner.appendChild(set_icon.__SVG_frame);                                
                function update_Floating(){                    
                    if(show_float){                        
                        Flt.attach();                        
                        show_float = false;                    
                    }                    
                    else{                        
                        Flt.detach();                        
                        show_float = true;                    
                    }                
                }                
                corner.onclick = ()=>update_Floating();            
            }            
            init_corner(plot_time);            
            init_corner(plot_speed_up);            
            let show_speedup = false;            
            legend.childNodes[legend.childNodes.length-1].onclick = ()=>{                
                if(show_speedup){                    
                    document.body.removeChild(plot_time.get_main_div());                    
                    document.body.appendChild(plot_speed_up.get_main_div());                    
                    set_descr(Flt.get_header(), "yellow", "normalized speed up");                    
                    show_speedup = false;                    
                    console.log("speed set");                
                }                
                else{                    
                    document.body.removeChild(plot_speed_up.get_main_div());                    
                    document.body.appendChild(plot_time.get_main_div());                    
                    set_descr(Flt.get_header(), "yellow", "unormalized times");                    
                    show_speedup = true;                    
                    console.log("time set");                
                }            
            }            
            legend.childNodes[legend.childNodes.length-1].onclick();       
            alert("use the button at the bottom left corner to (un)normalize the data (the normalized speed up or the absolute computation times will be showed)"); 
        </script>    
    </body>
</html> 


